<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-01-07 
 -->


<template>
  <el-skeleton :loading="loading" animated :throttle="500" :count="count">
    <template #template>
      <div class="ske-item">
        <el-skeleton-item class="ske-img" variant="image" />
        <div class="ske-info">
          <el-skeleton-item variant="h3" class="ske-name" />
          <el-skeleton-item variant="h3" class="ske-rcmdtext" style="width:50%" />
          <el-skeleton-item variant="h5" class="ske-count" />
        </div>
      </div>
    </template>
    <template #default>
      <div class='dj'>
        <router-link :to="{ path: '/', query: { id: item.id }}" class="item" :key="item.id" v-for="item in list">
          <div class="faceImg">
            <el-image :src="item.picUrl + '?param=120y120'">
              <template v-slot:placeholder class="image-slot">
                <i class="iconfont icon-placeholder"></i>
              </template>
            </el-image>
          </div>
          <div class="info">
            <div class="dj-name" v-if="item.name">{{item.name}}</div>
            <div class="dj-rcmdtext" v-if="item.rcmdtext">{{item.rcmdtext}}</div>
            <div class="dj-count"><span>共{{formartNum(item.programCount)}}期</span> <span>订阅{{formartNum(item.subCount)}}次</span></div>
          </div>
        </router-link>
      </div>
    </template>
  </el-skeleton>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useInstance } from "@/hooks";
import { formartNum } from "@/utils";
import { GETHOTDJ } from "@/api";
export default defineComponent({
  name: 'djList',
  setup(props, { emit, slots }) {
    const { $Message: $message } = useInstance();
    // 热门电台
    const info = reactive({
      list: [],
      params: { limit: 6 },
      count: 6,
      loading: true
    });
    // 获取人电台
    const getHotDj = async (params) => {
      const defaults = { limit: 30, offset: 0 };
      const { code, djRadios } = await GETHOTDJ({...defaults, ...params});
      if (code !== 200) return $message.error('数据请求失败');
      info['list'] = djRadios;
      info['loading'] = false;
    }

    onMounted(() => {
      getHotDj(info['params']);
    })
    return {
      formartNum,
      ...toRefs(info),
    }
  }
});

</script>

<style lang="scss" scoped>
.dj {
  display: block;
  flex-wrap: wrap;
  font-size: 0;

  .item {
    display: inline-flex;
    width: 50%;
    margin-bottom: 20px;
  }

  .faceImg {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    overflow: hidden;
  }

  .info {
    flex: 1;
    padding: 5px 0;
    margin: 0 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  }

  .dj-name {
    font-size: 18px;
    font-weight: bold;
  }

  .dj-rcmdtext {
    font-size: 14px;
    color: #666;
  }

  .dj-count {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
  }
}

.el-skeleton {
  width: auto;
  display: block;
  flex-wrap: wrap;
  font-size: 0;

  .ske-item {
    display: inline-flex;
    width: 50%;
    margin-bottom: 20px;
  }

  .ske-img {
    width: 120px;
    height: 120px;
    border-radius: 4px;
    overflow: hidden;
  }

  .ske-info {
    flex: 1;
    padding: 10px 0;
    margin: 0 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  }
}
</style>
